<template>
  <div class="mainua">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>满减满赠</span>
          </div>
        </div>
        <!-- 主要部分 -->
        <div class="marginTop10">
          <!-- 满减活动 -->
          <div v-if="type == 1">
            <el-form
              class="demo-form-inline"
              :model="reduce_form"
              label-width="110px"
              ref="form"
            >
              <div class="container">
                <div class="add_container">
                  <div class="el-form-item el-form-item--small">
                    <label
                      for=""
                      class="el-form-item__label"
                      style="width: 110px"
                      ><div>活动类型：</div></label
                    >
                    <div
                      class="el-form-item__content"
                      style="margin-left: 110px"
                    >
                      <span class="type_box_reduce">满减</span>
                    </div>
                  </div>
                  <el-form-item label="活动名称：" prop="name">
                    <el-input
                      class="wid240"
                      v-model="reduce_form.name"
                      placeholder="活动名称"
                      disabled
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="活动时间：" prop="time">
                    <el-date-picker
                      v-model="reduce_form.time"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      disabled
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">满减规则：</span>
                    <div
                      class="rule"
                      v-for="(item, index) in reduce_rule_list"
                      :key="index"
                    >
                      消费满
                      <el-input-number
                        v-model="item.price"
                        :controls="false"
                        :precision="2"
                        disabled
                      ></el-input-number>
                      元，减
                      <el-input-number
                        v-model="item.reduce"
                        :controls="false"
                        :precision="2"
                        disabled
                      ></el-input-number>
                      元
                    </div>
                  </el-form-item>
                  <div class="el-form-item el-form-item--small">
                    <label
                      for=""
                      class="el-form-item__label"
                      style="width: 110px"
                      ><div>商品限制：</div></label
                    >
                    <div
                      class="el-form-item__content"
                      style="margin-left: 110px"
                    >
                      <span class="goods_limit_box">{{
                        typeList[reduce_form.goods_limit]
                      }}</span>
                    </div>
                  </div>
                  <!-- <el-form-item label="商品限制：" prop="goods_limit">
                    <el-radio-group v-model="reduce_form.goods_limit">
                      <el-radio :label="0" disabled>不限制</el-radio>
                      <el-radio :label="1" disabled>指定商品</el-radio>
                      <el-radio :label="2" disabled>排除商品</el-radio>
                    </el-radio-group>
                  </el-form-item> -->
                </div>
                <!-- goods_table_show -->
                <div class="goods_container">
                  <div class="goods_container_header"></div>
                  <div class="goods_container_body main_table">
                    <el-table
                      ref="multipleTable"
                      :data="list"
                      element-loading-text="加载中"
                      fit
                      border
                      highlight-current-row
                    >
                      <el-table-column label="序号">
                        <template slot-scope="scope">{{
                          scope.$index + 1
                        }}</template>
                      </el-table-column>
                      <el-table-column
                        label="商品名称"
                        prop="goods_name"
                        :show-overflow-tooltip="true"
                      >
                        <template slot-scope="scope">
                          {{ scope.row.goods_name }}【{{ scope.row.spu_name }}】
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="单位"
                        prop="unit"
                        :show-overflow-tooltip="true"
                      />
                      <el-table-column
                        label="市场价"
                        prop="price"
                        :show-overflow-tooltip="true"
                      />
                    </el-table>
                  </div>
                </div>
              </div>
            </el-form>
          </div>
          <!-- 满赠活动 -->
          <div v-if="type == 2">
            <el-form
              class="demo-form-inline"
              :model="plus_form"
              label-width="110px"
              ref="form"
            >
              <div class="container">
                <div class="add_container">
                  <div class="el-form-item el-form-item--small">
                    <label
                      for=""
                      class="el-form-item__label"
                      style="width: 110px"
                      ><div>活动类型：</div></label
                    >
                    <div
                      class="el-form-item__content"
                      style="margin-left: 110px"
                    >
                      <span class="type_box_plus">满赠</span>
                    </div>
                  </div>
                  <el-form-item label="活动名称：" prop="name">
                    <el-input
                      class="wid240"
                      v-model="plus_form.name"
                      disabled
                      placeholder="活动名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="活动时间：" prop="time">
                    <el-date-picker
                      v-model="plus_form.time"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      disabled
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="满赠规则：">
                    <div slot="label">满赠规则：</div>
                    <div
                      class="rule"
                      v-for="(item, index) in plus_rule_list"
                      :key="index"
                    >
                      消费满
                      <el-input-number
                        v-model="item.price"
                        :controls="false"
                        disabled
                      ></el-input-number>
                      元，送
                      <div class="tabg_box">
                        <el-tag
                          type="info"
                          v-for="tag in item.goods"
                          :key="tag.goods_id"
                          class="tagclass"
                        >
                          {{ tag.goods_name }}<em>{{ tag.num }}</em
                          >{{ tag.spu_name }}
                        </el-tag>
                      </div>
                    </div>
                  </el-form-item>
                  <div class="el-form-item el-form-item--small">
                    <label
                      for=""
                      class="el-form-item__label"
                      style="width: 110px"
                      ><div>商品限制：</div></label
                    >
                    <div
                      class="el-form-item__content"
                      style="margin-left: 110px"
                    >
                      <span class="goods_limit_box">{{
                        typeList[plus_form.goods_limit]
                      }}</span>
                    </div>
                  </div>
                  <!-- <el-form-item label="商品限制：" prop="goods_limit">
                    <el-radio-group v-model="plus_form.goods_limit">
                      <el-radio :label="1" disabled>不限制</el-radio>
                      <el-radio :label="2" disabled>指定商品</el-radio>
                      <el-radio :label="3" disabled>排除商品</el-radio>
                    </el-radio-group>
                  </el-form-item> -->
                </div>
                <div class="goods_container">
                  <div class="goods_container_header"></div>
                  <div class="goods_container_body main_table">
                    <el-table
                      ref="multipleTable"
                      :data="list"
                      element-loading-text="加载中"
                      fit
                      border
                      highlight-current-row
                    >
                      <el-table-column label="序号">
                        <template slot-scope="scope">{{
                          scope.$index + 1
                        }}</template>
                      </el-table-column>
                      <el-table-column
                        label="商品名称"
                        prop="goods_name"
                        :show-overflow-tooltip="true"
                        ><template slot-scope="scope">
                          {{ scope.row.goods_name }}【{{ scope.row.spu_name }}】
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="单位"
                        prop="unit"
                        :show-overflow-tooltip="true"
                      />
                      <el-table-column
                        label="市场价"
                        prop="price"
                        :show-overflow-tooltip="true"
                      />
                    </el-table>
                  </div>
                </div>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get_full_info } from "@/api/marketing/marketing.js";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime } from "@/utils/index";
export default {
  data() {
    return {
      type: 2, //1 满减    2满赠
      id: "",
      parseTime,
      reduce_form: {
        name: "",
        start_time: "",
        end_time: "",
        goods_limit: null,
        time: [],
      },
      reduce_rule_list: [
        {
          price: 0,
          reduce: 0,
        },
      ],
      plus_form: {
        name: "",
        start_time: "",
        end_time: "",
        goods_limit: null,
        time: [],
      },
      plus_rule_list: [
        {
          price: 0,
          goods: [],
        },
      ],
      list: [],
      typeList: {
        0: "不限制",
        1: "指定商品",
        2: "排除商品",
      },
    };
  },
  methods: {
    get_full_info() {
      let form = {
        type: this.type,
        id: this.id,
      };
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      get_full_info(data).then((res) => {
        if (res.errcode == 0) {
          switch (this.type) {
            case "1":
              this.handleReduce(res.data.info);
              break;

            case "2":
              this.handlePlus(res.data.info);
              break;
          }
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 满减活动数据处理
    handleReduce(info) {
      this.reduce_form.name = info.name;
      info.start_time = this.parseTime(
        new Date(info.start_time * 1000),
        "{y}-{m}-{d}"
      );
      info.end_time = this.parseTime(
        new Date(info.end_time * 1000),
        "{y}-{m}-{d}"
      );
      this.reduce_form.time = [info.start_time, info.end_time];
      this.reduce_rule_list = JSON.parse(info.rule_data);
      this.list = info.goods_data;
      this.reduce_form.goods_limit = info.goods_limit;
    },
    // 处理满赠活动数据
    handlePlus(info) {
      this.plus_form.name = info.name;
      info.start_time = this.parseTime(
        new Date(info.start_time * 1000),
        "{y}-{m}-{d}"
      );
      info.end_time = this.parseTime(
        new Date(info.end_time * 1000),
        "{y}-{m}-{d}"
      );
      this.plus_form.time = [info.start_time, info.end_time];
      this.plus_form.goods_limit = info.goods_limit;
      this.plus_rule_list = JSON.parse(info.rule_data);
      this.list = info.goods_data;
    },
  },
  created() {
    this.type = this.$route.params.type;
    this.id = this.$route.params.id;
    this.get_full_info();
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0 20px;
  margin-top: 15px;
  min-height: 400px;
}
// 满减规则
.rule {
  display: flex;
  align-items: center;
  &:not(:first-child) {
    margin-top: 10px;
  }
  /deep/.el-input-number {
    width: 80px;
    margin: 0 8px;
  }
  .rule_delete {
    width: 20px;
    font-size: 20px;
    font-weight: 900;
    margin-left: 15px;
  }
  .addrule_btn {
    cursor: not-allowed;
    background-color: #ebebeb;
    border-color: #ebebeb;
    color: #606266;
  }
  .tabg_box {
    min-width: 220px;
    min-height: 32px;
    margin-left: 5px;
    border-radius: 4px;
    border: 1px solid #e4e7ed;
    box-sizing: border-box;
    background-color: #f5f7fa;
    display: flex;
    align-items: center;
    cursor: not-allowed;
    /deep/ .el-tag {
      margin: 0 5px;
    }
    /deep/ .el-icon-close::before {
      transform: translateY(1px) translateX(-1px);
    }
  }
}
.goods_limit_box {
  padding: 8px 10px;
  border: 1px solid #e4e7ed;
  min-width: 64px;
  background-color: #f5f7fa;
  border-radius: 4px;
  color: #606266;
}
.type_box_plus {
  padding: 8px 10px;
  border: 1px solid #aacd6e;
  color: #aacd6e;
  border-radius: 4px;
}
.type_box_reduce {
  padding: 8px 10px;
  border: 1px solid #03a98e;
  color: #03a98e;
  border-radius: 4px;
}
</style>